<template>
	<view class="content">
		<view style="margin: 4px; text-align: right;">
			<button class="cu-btn bg-blue" @tap="complated">完成</button>
		</view>
        <view class="content">
            <m-canvas ref="canvas" :backgroundUrl="img_url" />
        </view>
		<!-- <button class="cu-btn" @click="saveData">save</button> -->
		<!-- <img style="border: 1px solid;" :src="preview_image" alt=""> -->
	</view>
</template>

<script>
	import mCanvas from '@/components/m-canvas/m-canvas'
	// import { variationShow } from '@/api/listing'

	export default {
		components: {
			mCanvas
		},
		data() {
			return {
				img_url: 'https://img13.360buyimg.com/n1/jfs/t1/171169/29/24048/10627/62105ccbEa441f4a1/bdf36b7aa9dd83e6.jpg', // 背景图片
				// img_url: '/static/1.jpg', // 背景图片
				renderCanvas: false,
				preview_image: '',	// 预览图
				printed_image: [],  //自定义设计元素
			};
		},
		mounted() {
			this.variationId = this.listing_variation_id
			// this.loadVariation()
		},
		methods: {
			onReDraw: function(e){
				const canvas = this.$refs.canvas
				canvas.draw()
			},
			complated: function(callback){
				this.saveData(callback)
			},
			saveData: function(callback){
				const self = this
				setTimeout(()=>{
					const item = this.$refs.canvas
					item.save((previewImage, printedImages)=>{
						if(!previewImage && !printedImages){
							callback(false)
							return
						}
						self.preview_image = previewImage
						self.printed_image = printedImages
            uni.navigateTo({
              url: '/pages/canvas/preview?imageUrl=' + previewImage
            })
					})
				}, 200)

			}
		}
	};
</script>

<style>

</style>
